<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-12 14:51:16
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-09-08 13:33:15
-->
<template>
  <div class="data-set-box" ref="er">
    <el-row
      v-for="(item, index) in recordList"
      :key="index"
      :style="index != 2 ? 'margin-bottom:15px;' : ''"
    >
      <el-col :span="3" class="col-data-common">{{ item.State }}</el-col>
      <el-col :span="21"> <div :id="'dataSet' + (index + 1)"></div></el-col>
      <el-col :span="3" class="col-opcipty-box">1</el-col>
      <el-col :span="21" class="font-common-box">
        <el-row>
          <el-col :span="6" class="row"
            >签到
            <div class="font-common-box2">{{ item.正常 }}人</div></el-col
          >
          <el-col :span="6" class="row"
            >请假
            <div class="font-common-box2">{{ item.请假 }}人</div></el-col
          >
          <el-col :span="6" class="row"
            >缺勤
            <div class="font-common-box2">{{ item.缺勤 }}人</div></el-col
          >
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  computed: {
    ...mapState(['recordList', 'dormitBool'])
  },
  data () {
    return {
      chart: null,
      chart2: null,
      chart3: null,
      data: [{ State: 'WY', 小于5岁: 600, '5至13岁': 58, '14至17岁': 20 }]
    }
  },
  methods: {
    init (id, row, num) {
      const ds = new DataSet()
      const dv = ds.createView().source(row)
      dv.transform({
        type: 'fold',
        fields: ['正常', '请假', '缺勤'], // 展开字段集
        key: '年龄段', // key字段
        value: '人口数量', // value字段
        retains: ['State'] // 保留字段集，默认为除fields以外的所有字段
      })
      // 数据被加工成 {State: 'WY', 年龄段: '小于5岁', 人口数量: 25635}
      this.chart = new Chart({
        container: id,
        autoFit: true,
        height: 28
      })
      this.chart.coordinate().transpose()
      this.chart.legend(false)
      this.chart.data(dv.rows)
      this.chart.scale('人口数量', { nice: true })

      this.chart.axis(false)

      this.chart.tooltip({
        shared: true,
        showMarkers: false
      })

      this.chart
        .interval()
        .adjust('stack')
        .position('State*人口数量')
        .color('年龄段', ['#0065fe', '#00e2b5', '#fd7603'])

      this.chart.interaction('active-region')

      this.chart.render()
    },
    init2 (id, row, num) {
      const ds = new DataSet()
      const dv = ds.createView().source(row)
      dv.transform({
        type: 'fold',
        fields: ['正常', '请假', '缺勤'], // 展开字段集
        key: '年龄段', // key字段
        value: '人口数量', // value字段
        retains: ['State'] // 保留字段集，默认为除fields以外的所有字段
      })
      // 数据被加工成 {State: 'WY', 年龄段: '小于5岁', 人口数量: 25635}
      this.chart2 = new Chart({
        container: id,
        autoFit: true,
        height: 28
      })
      this.chart2.coordinate().transpose()
      this.chart2.legend(false)
      this.chart2.data(dv.rows)
      this.chart2.scale('人口数量', { nice: true })

      this.chart2.axis(false)

      this.chart2.tooltip({
        shared: true,
        showMarkers: false
      })

      this.chart2
        .interval()
        .adjust('stack')
        .position('State*人口数量')
        .color('年龄段', ['#0065fe', '#00e2b5', '#fd7603'])

      this.chart2.interaction('active-region')

      this.chart2.render()
    },
    init3 (id, row, num) {
      const ds = new DataSet()
      const dv = ds.createView().source(row)
      dv.transform({
        type: 'fold',
        fields: ['正常', '请假', '缺勤'], // 展开字段集
        key: '年龄段', // key字段
        value: '人口数量', // value字段
        retains: ['State'] // 保留字段集，默认为除fields以外的所有字段
      })
      // 数据被加工成 {State: 'WY', 年龄段: '小于5岁', 人口数量: 25635}
      this.chart3 = new Chart({
        container: id,
        autoFit: true,
        height: 28
      })
      this.chart3.coordinate().transpose()
      this.chart3.legend(false)
      this.chart3.data(dv.rows)
      this.chart3.scale('人口数量', { nice: true })

      this.chart3.axis(false)

      this.chart3.tooltip({
        shared: true,
        showMarkers: false
      })

      this.chart3
        .interval()
        .adjust('stack')
        .position('State*人口数量')
        .color('年龄段', ['#0065fe', '#00e2b5', '#fd7603'])

      this.chart3.interaction('active-region')

      this.chart3.render()
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.recordList) {
          this.recordList.forEach((item, index) => {
            const str = []
            const id = 'dataSet' + (index + 1)
            str.push(item)
            if (index === 0) {
              if (this.dormitBool) {
                this.chart.destory()
              }
              this.init(id, str)
            } else if (index === 1) {
              if (this.dormitBool) {
                this.chart2.destory()
              }
              this.init2(id, str)
            } else {
              if (this.dormitBool) {
                this.chart3.destory()
              }
              this.init3(id, str)
            }
          })
        }
      }, 500)
      // this.init()
    })
  },
  watch: {
    recordList: {
      handler: function (newValue, oldValue) {
        if (newValue !== oldValue && oldValue.length !== 0) {
          const that = this
          this.recordList.forEach((item, index) => {
            const str = []
            const id = 'dataSet' + (index + 1)
            str.push(item)
            if (index === 0) {
              if (that.dormitBool) {
                that.chart.destroy()
              }
              that.init(id, str)
            } else if (index === 1) {
              if (that.dormitBool) {
                that.chart2.destroy()
              }
              that.init2(id, str)
            } else {
              if (that.dormitBool) {
                that.chart3.destroy()
              }
              that.init3(id, str)
            }
          })
        }
      }
    }
  },
  created () {}
}
</script>
<style lang="less" scoped>
.data-set-box {
  margin-top: 10px;
}
.col-data-common {
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 18px;
}
.col-opcipty-box {
  color: #010003;
  text-align: center;
  line-height: 28px;
  opacity: 0;
}
.font-common-box {
  color: #e1e1ea;
  font-size: 14px;
}
.font-common-box2 {
  margin-left: 5px;
}
</style>
